<template>
  <div class="clearfix">

    <a-table :columns="itemColumns" :dataSource="formData[field]" :pagination="false" rowKey="id" :scroll="{ y: 300 }" bordered>

      <template slot="indexNo" slot-scope="text,record,index">
        {{index+1}}
      </template>

      <template slot="pic" slot-scope="text,record,index">
        <div>
          <pic-uploader
                  :file-list="record.pic"
                  :numberLimit="1"
          />
        </div>
      </template>
      <template slot="url" slot-scope="text,record,index">
        <a href="javascript:;" v-if="record.url.title" @click="handleUrl(record)" > [{{record.url.type_name}}] {{record.url.title}} </a>
        <a href="javascript:;" @click="handleUrl(record)"><a-icon type="edit" /></a>
      </template>
      <template slot="action" slot-scope="text,record,index">
        <a href="javascript:;" v-if="index>0" @click="onUp(index)">上移</a>
        <a-divider type="vertical" v-if="index>0" />
        <a href="javascript:;" v-if="index<(formData[field].length-1)" @click="onDown(index)">下移</a>
        <a-divider type="vertical" v-if="index<(formData[field].length-1)"/>
        <a href="javascript:;" @click="onInsert(index)">插入</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确定删除吗" @confirm="onRemove(index)"  okText="确定" cancelText="取消">
          <a href="javascript:;">删除</a>
        </a-popconfirm>
      </template>
      <template slot="title" slot-scope="currentPageData">
        门店配置
      </template>
      <template slot="footer" slot-scope="currentPageData">
        <a-button icon="plus" @click="addItem" >新增</a-button>
      </template>
    </a-table>

    <url-picker :formData="selectedItem" field="url" visibleField="urlVisible"   />
  </div>
</template>
<script>
  import PicUploader from '@/components/PicUploader/'
  import UrlPicker from '@/components/UrlPicker/'
  export default {
    name: 'ShopListPicker',
    components: {
      PicUploader,UrlPicker
    },
    data () {
      return {
        itemColumns:[
          {
            title: '序号',
            dataIndex: 'id',
            width: '80px',
            scopedSlots: { customRender: 'indexNo' }
          },
          {
            title: '跳转',
            width: '300px',
            dataIndex: 'url',
            scopedSlots: { customRender: 'url' }
          },
          {
            title: '操作',
            width: '200px',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' },
          }
        ],
        selectedItem:{
          pic:[],
          url:{

          },
          urlVisible : false,
        }
      }
    },
    props: {
      formData:{
        type: Object,
        required: true
      },
      field:{
        type: String|Number,
        required: true
      }
    },

    computed:{
      content:{
        get: function () {
          return this.formData[this.field] ;
        },
        set: function () {
        }
      }
    },
    methods: {
      addItem(){
        this.formData[this.field].push({
          'url':{
          },
          'urlVisible':false,
        })
      },

      handleUrl(item){
        let that = this;
        item.urlVisible = true;
        that.selectedItem = item;
      },
      onUp(k){
        if(k<=0){
          return false;
        }
        var tmp = this.formData[this.field][k];
        this.$set(this.formData[this.field],k,this.formData[this.field][k-1]);
        this.$set(this.formData[this.field],k-1,tmp);
      },
      onDown(k){
        if(k>=this.formData[this.field].length-1){
          return false;
        }
        var tmp = this.formData[this.field][k];
        this.$set(this.formData[this.field],k,this.formData[this.field][k+1]);
        this.$set(this.formData[this.field],k+1,tmp);
      },
      onRemove(k){
        this.formData[this.field].splice(k,1);
      },
      onInsert(k){
        this.formData[this.field].splice(k,0,{
          'url':{
          },
          'urlVisible':false,
        });
      }

    },
  }
</script>
<style>

</style>